<template>
  <FormContainer :column="column">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
      <el-form-item prop="prefixNumber" label="前缀">
        <el-input v-model="formData.prefixNumber" number placeholder="请输入前缀" clearable></el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber" label="号码">
        <el-input v-model="formData.phoneNumber" placeholder="请输入号码" clearable></el-input>
      </el-form-item>
      <el-form-item prop="telecomOperator" label="运营商">
        <el-select v-model="formData.telecomOperator" placeholder="请选择运营商" clearable filterable>
          <el-option v-for="(l,i) in telecomList" :key="i" :value="l.dictCode" :label="l.dictName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="skillNo" label="使用技能组">
        <el-select v-model="formData.skillNo" placeholder="请选择使用技能组" :multiple="!isQuery" clearable filterable>
          <el-option v-for="(g,i) in skillList" :key="i" :value="g.skillNo" :label="g.skillName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="isQuery">
        <Button type="primary" enter @click="clickHandle">查询</Button>
      </el-form-item>
      <el-form-item v-else :span="24">
        <div class="button-container" style="padding-top:0">
          <Button @click="cancelHandle">取消</Button>
          <Button type="primary" @click="clickHandle">确定</Button>
        </div>
      </el-form-item>
    </el-form>
  </FormContainer>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { validateTel } from '@/utils/validate'
import { ccDict } from '@/api/dataDict'
import { getSkillGroup } from '@/api/skillGroup'
import { deepCopy } from '@/utils'
import { postPrefixNumberInfo, putPrefixNumberInfo } from '@/api/prefixNumberInfo'
export default {
  name: 'Input',
  components: {
    FormContainer
  },
  props: {
    row: {
      type: Object,
      default: () => ({})
    },
    isQuery: {
      type: Boolean,
      default: true
    },
    column: {
      type: Number,
      default: 5
    }
  },
  data() {
    const validatorNumber = (r, v, c) => {
      if (this.isQuery) {
        c()
        return
      }
      if (/^\d+$/.test(v)) {
        c()
      } else {
        c(new Error('只能输入数字！'))
      }
    }
    const validatorPhone = (r, v, c) => {
      if (this.isQuery) {
        c()
        return
      }
      if (validateTel(v)) {
        c()
      } else {
        c(new Error('输入的号码格式不正确！'))
      }
    }
    const validateSkill = (r, v, c) => {
      if (this.isQuery) {
        c()
        return
      }
      if (v.length <= 0) {
        c(new Error('请选择技能组！'))
      } else {
        c()
      }
    }
    return {
      operatorList: [], // 运营商
      formData: {
        prefixNumber: '',
        phoneNumber: '',
        telecomOperator: '',
        skillNo: this.isQuery ? '' : []
      },
      formRules: {
        prefixNumber: [
          { required: !this.isQuery, message: '请输入前缀', trigger: 'change' },
          { required: !this.isQuery, validator: validatorNumber, trigger: 'change' }
        ],
        phoneNumber: [
          { required: !this.isQuery, message: '请输入手机号码', trigger: 'change' },
          { required: !this.isQuery, validator: validatorPhone, trigger: 'change' }
        ],
        telecomOperator: [{ required: !this.isQuery, message: '请选择运营商', trigger: 'change' }],
        skillNo: [
          { required: !this.isQuery, message: '请选择技能组', trigger: 'change' },
          { required: !this.isQuery, validator: validateSkill, trigger: 'change' }
        ]
      },
      skillList: [], // 使用技能组
      telecomList: []
    }
  },
  computed: {
    isEdit() {
      return Object.keys(this.row).length > 0
    }
  },
  watch: {
    row: {
      handler: 'initData',
      immediate: true
    }
  },
  created() {
    this.getTelOperator()
    this.getSkillGroup()
  },
  methods: {
    clickHandle(type) {
      if (this.isQuery) {
        type !== 'export' && this.$emit('query', this.formData)
        return deepCopy(this.formData)
      }
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        data.skillName = []
        for (const id of data.skillNo) {
          for (const item of this.skillList) {
            if (item.skillNo === id) {
              data.skillName.push(item.skillName)
              break
            }
          }
        }
        data.skillNo = data.skillNo.join(',')
        data.skillName = data.skillName.join(',')

        let ajax = postPrefixNumberInfo
        if (this.isEdit) {
          data.id = this.row.id
          ajax = putPrefixNumberInfo
        }
        return ajax(data).then(res => {
          this.$message.success('保存成功！')
          this.$emit('refresh')
          this.$emit('close')
        })
      })
    },
    // 取消
    cancelHandle() {
      this.$emit('close')
    },
    // 编辑时初始化数据
    initData() {
      if (this.isEdit) {
        for (const key of Object.keys(this.formData)) {
          let v = this.row[key]
          if (key === 'skillNo') {
            v = v.split(',')
            // this.$set(this.formData, key, v.map(e => this.$strToNumber(e)))
            this.$set(this.formData, key, v)
            continue
          }
          if (key === 'telecomOperator') {
            this.$set(this.formData, key, this.$numToString(v))
            continue
          }
          this.$set(this.formData, key, v)
        }
      }
    },
    // 获取运营商
    getTelOperator() {
      ccDict('TELECOM_OPERATOR').then(res => {
        this.telecomList = res.data
      })
    },
    // 获取技能组
    getSkillGroup() {
      getSkillGroup().then(res => {
        this.skillList = res.data
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
